<template>
    <div style="padding: 0 10px;">
      <!-- 标题 -->
        <h4 class="h4">{{ imageList.title }}</h4>
        <div class="info">
            <P class="time">发表时间：{{ imageList.add_time | formatData }}</P>
            <p class="click">点击：{{ imageList.click }}</p>
        </div>
        <hr />
        <!-- 图片信息 -->
        <div>
            <ul>
                <li :key="index" v-for="(item,index) in pirtureList">
                    <img :src="item.src" @click="imagesClick(index)" >
                </li>
            </ul>
        </div>
        <!-- 介绍详情 -->
        <div v-html="imageList.content" style="display: block;padding:0 5px;"></div>
        <!-- 发表评论 -->
        <comment v-bind:comId="$route.params.id"></comment>
    </div>
</template>

<script>
import { ImagePreview } from 'vant'
import comment from '../../components/comment.vue'
export default {
  components: {
    comment
  },
  data () {
    return {
      imageList: [],
      pirtureList: [],
    }
  },

  created () {
    this.imageDetail()
    this.detailPirture()
  },

  methods: {
    // 获取图片详情
    async imageDetail () {
      const { data: res } = await this.$axios.get(`/api/getimageInfo/${this.$route.params.id}`)
      // console.log(res)
      this.imageList = res.message[0]
    },
    // 图片详情缩略图
    async detailPirture () {
      const { data: res } = await this.$axios.get(`/api/getthumimages/${this.$route.params.id}`)
      // console.log(res)
      this.pirtureList = res.message
    },
    // 点击查看图片
    imagesClick (index) {
      var picArr = []
      var startPosition = index
      this.pirtureList.forEach(item => {
        picArr.push(item.src)
      })
      ImagePreview(picArr, startPosition)
    },
  }
}
</script>

<style scoped lang='less'>
.h4{
    text-align: center;
    color: #26a2ff;
    font-size: 15px;
}
.info{
    overflow: hidden;
    .time{
        float: left;
        font-size: 13px;
        color: #8f8f94;
    }
    .click{
        float: right;
        font-size: 13px;
        color: #8f8f94;
    }
}
ul{
    list-style: none;
    margin: 10px 0;
    overflow: hidden;
    li{
        float: left;
        width: 33.3333%;
        padding: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        img {
            width: 100%;
            -webkit-box-shadow: 1px 0 8px 1px rgba(0,0,0,.3);
            box-shadow: 1px 0 8px 1px rgba(0,0,0,.3);
        }
    }
}
</style>
